<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/code.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            height: 300px;
            background-color: rgba(1, 50, 50, 0.5);
            padding: 20px;
            /* margin: 100px auto; */
        }

        .sub div {
            margin-bottom: 30px;
            position: relative;
        }

        .sub span {
            font-size: 12px;
            position: absolute;
            left: 0px;
            top: 30px;
            display: none;
        }

        .sub .erro {
            display: block;
            color: red;

        }

        .sub .right {
            display: block;
            color: aqua;
        }

        .sub i {
            cursor: context-menu;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <form class="sub" action="javascript:;" method="get">
            <div>
                <p>
                    <label for="user">用户名：</label>
                    <input type="text" class="user" id="user">
                </p>
                <span class="useSpan">用户名由6-12字母数字下划线组成，不能以数字开头</span>
            </div>
            <div>
                <p>
                    <label for="pwd">密&emsp;码：</label>
                    <input type="password" class="pwd" id="pwd">
                </p>
                <span class="pwdSpan">密码由6-12字母数字下划线组成</span>
            </div>
            <div>
                <p>
                    <label for="phone">手机号：</label>
                    <input type="text" class="phone" id="phone">
                </p>
                <span class="phoneSpan">请输入正确的手机号</span>
            </div>
            <div>
                <p>
                    <label for="mail">邮&emsp;箱：</label>
                    <input type="text" class="email" id="mail">
                </p>
                <span class="emailSpan">请输入正确的邮箱</span>
            </div>
            <div>
                <p>
                    <label for="code">验证码：</label>
                    <input type="text" id="code">
                    <i id="createCode">qwrt</i>
                </p>
                <span id="codeSpan">验证码有误</span>
            </div>
            <input type="submit" class="subBtn" value="注册">
            <input type="reset" class="reBtn" value="取消">
        </form>
    </div>

</body>
<script>
    var user = document.getElementsByClassName("user")[0];
    var useSpan = document.getElementsByClassName("useSpan")[0];
    var pwd = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwdSpan")[0];
    var phone = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phoneSpan")[0];
    var email = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("emailSpan")[0];
    var subBtn = document.getElementsByClassName("subBtn")[0];
    var code = document.getElementById("code");
    var createCode = document.getElementById("createCode");
    var codeSpan = document.getElementById("codeSpan");



    var isUserOk;
    var isPwdOk;
    var isPhoneOk;
    var isEmailOk;
    var isCodeOk;
    // 用户名
    user.onblur = function () {
        isUserOk = false;
        var reg = /^[a-zA-Z_][\w]{5,11}$/;
        var str = user.value;
        if (reg.test(str)) {
            if (userList().indexOf(str) == -1) {
                useSpan.textContent = "用户名格式正确";
                useSpan.className = "right";
                isUserOk = true;
            } else {
                useSpan.textContent = "该用户名已被注册";
                useSpan.className = "erro";
            }
        } else {
            useSpan.className = "erro";
            useSpan.textContent = "用户名由6-12字母数字下划线组成，不能以数字开头";
        }
    }

    // 密码
    pwd.onblur = function () {
        isPwdOk = false;
        var reg = /^[0-9a-zA-Z]{6,12}$/;
        var str = pwd.value;
        console.log(reg.test(str));

        var flag1 = /[A-Z]/.test(str) ? true : false;
        var flag2 = /[a-z]/.test(str) ? true : false;
        var flag3 = /[0-9]/.test(str) ? true : false;
        var sum = flag1 + flag2 + flag3;

        if (!(reg.test(str))) {
            console.log(11);
            pwdSpan.className = "erro";
            pwdSpan.innerText = "密码由6-12字母数字下划线组成";
        } else {
            pwdSpan.className = "right";
            switch (sum) {
                case 1:
                    pwdSpan.innerText = "密码强度:弱";
                    break;
                case 2:
                    pwdSpan.innerText = "密码强度:中";
                    break;
                case 3:
                    pwdSpan.innerText = "密码强度:强";
                    break;
            }
            isPwdOk = true;
        }
    }

    // 手机号
    phone.onblur = function () {
        isPhoneOk = false;
        var reg = /^1[3-9]\d{9}$/;
        var str = phone.value;
        if (reg.test(str)) {
            if (phoneList().indexOf(str) == -1) {
                phoneSpan.textContent = "手机号格式正确";
                phoneSpan.className = "right";
                isPhoneOk = true;
            } else {
                phoneSpan.textContent = "该手机号已被注册";
                phoneSpan.className = "erro";
            }
        } else {
            phoneSpan.className = "erro";
            phoneSpan.textContent = "请输入正确的手机号";
        }
    }

    // 邮箱
    email.onblur = function () {
        isEmailOk = false;
        var reg = /^\w{6,12}@\w{2,8}\.(com|cn|net)$/;
        var str = email.value;
        if (reg.test(str)) {
            if (emailList().indexOf(str) == -1) {
                emailSpan.textContent = "邮箱格式正确";
                emailSpan.className = "right";
                isEmailOk = true;
            } else {
                emailSpan.textContent = "该邮箱号已被注册";
                emailSpan.className = "erro";
            }
        } else {
            emailSpan.className = "erro";
            emailSpan.textContent = "请输入正确的邮箱";
        }
    }

    //验证码输入框
    code.onblur = function () {
        isCodeOk = false;
        var codeReg = new RegExp(`^${createCode.innerText}$`, "i");
        if (!codeReg.test(code.value)) {
            codeSpan.innerText = "验证码不对";
            codeSpan.className = "erro";
        } else {
            codeSpan.innerText = "验证码正确";
            codeSpan.className = "right";
            isCodeOk = true;
        }
    }

    //点击随机验证码
    createCode.innerText = myRandom();
    createCode.onclick = function () {
        createCode.innerText = myRandom();
    }

    //验证
    subBtn.onclick = function () {
        console.log(isUserOk, isPwdOk, isPhoneOk, isEmailOk, isCodeOk);
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            setCookie(`user_${user.value}`, user.value, 3);
            setCookie(`pwd_${user.value}`, pwd.value, 3);
            setCookie(`phone_${user.value}`, phone.value, 3);
            setCookie(`email_${user.value}`, email.value, 3);
            // location.href = "login.html";
            // open("login.html", "login")
        }
    }







</script>

</html>